<template>
	<div>
		<el-dialog v-model="showModal" class="peak-dialog" fullscreen :close-on-click-modal="false" :title="title" :width="1200">
			<ProcessDesigner :key="`designer-${reloadIndex}`" ref="modelDesignerRef" :designer-form="designerForm" :bpmn-xml="bpmnXml" @save="onSaveDesigner" />
		</el-dialog>
	</div>
</template>
<script setup>
import global from '@/utils/global'
import { ProcessDesigner } from '@meta/bpmn'
const emit = defineEmits(['peak-modal-ok'])
/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-10-07 15:52:04
 */
const bpmnXml = ref('')
const reloadIndex = ref(0)

const state = reactive({
	showModal: false,
	title: '',
	designerForm: {
		modelId: '',
		form: {
			processName: '',
			processKey: '',
		},
	},
})

const { showModal, title, designerForm } = toRefs(state)
/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-10-07 15:52:09
 */
const handleShowModal = async row => {
	console.log(row)
	state.showModal = true
	await nextTick()
	reloadIndex.value++
	state.designerForm.modelId = row.modelId
	state.title = '流程模型设计-' + row.modelKey
	getFormList(row.formType)
	getBpmnXml(row.modelId)
}
const getFormList = formType => {
	console.log(formType)
	global.$fetchPostData(`/sop-joint-disposal/web/v1/form/formList`, { formType: formType }).then(data => {
		if (data.code == 200) {
			localStorage.setItem('formListData', JSON.stringify(data.data))
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
const getBpmnXml = modelId => {
	global.$fetchGetData(`/sop-joint-disposal/web/v1/model/getBpmnXml`, { modelId: modelId }).then(data => {
		if (data.code == 200) {
			bpmnXml.value = data.data
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}

const onSaveDesigner = str => {
	bpmnXml.value = str
	const dataBody = {
		modelId: state.designerForm.modelId,
		json_xml: str,
		newVersion: true,
	}
	global.$fetchPostData(`/sop-joint-disposal/web/v1/model/save`, dataBody).then(data => {
		if (data.code == 200) {
			global.$baseMessage('保存成功！', 'success')
			emit('peak-modal-ok', 2)
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}

defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped>
:deep() {
	.el-dialog__body {
		padding: 1px 0px;
		height: 95vh;
		max-height: 100vh !important;
	}
}
</style>
